<template>
    <div id="ClassStarts">
    <Header></Header>
    <Nav></Nav>
    <span class="headertitle">消息管理</span>
    <el-card class="box-card">
      <el-tabs v-model="activeName" type="card" >
        <el-tab-pane label="用户管理" name="first">
          <div class="top">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item class="ktW" label="提醒标题">
                  <el-input v-model="Munb1" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item  v-model="region" class="ktW" label="提醒方式">
              <el-select value="" placeholder="请选择">
                <el-option label="选项一" value="shanghai"></el-option>
                <el-option label="选项二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="ktW2" label="通知时间">
                    <el-date-picker
                      v-model="value1"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>

            </el-form-item>
            <el-form-item  v-model="region" class="ktW3" label="已读/未读">
              <el-select value="" placeholder="请选择">
                <el-option label="已读" value="0"></el-option>
                <el-option label="未读" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="btnss">
              <el-button type="primary">筛选</el-button>
              <el-button>清空</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                >
                <el-table-column type="selection" width="50"></el-table-column>
             <el-table-column label="课题编号" width="150">
               <template slot-scope="scope">{{ scope.row.ktbh }}</template>
             </el-table-column>
             <el-table-column prop="sequence" label="提醒标题" width="200" ></el-table-column>
             <el-table-column prop="txnr" label="提醒内容" width="230"></el-table-column>
             <el-table-column prop="address" label="课题名称"></el-table-column>
             <el-table-column prop="personincharge" label="课题负责人"></el-table-column>
             <el-table-column prop="remind" label="提醒方式"></el-table-column>
             <el-table-column prop="data1" label="通知日期"></el-table-column>
             <el-table-column prop="read" label="已读/未读"></el-table-column>
             <el-table-column prop="readtime" label="已读时间"></el-table-column>
            </el-table>
        </el-tab-pane>
        <!-- 通知公告 -->
        <el-tab-pane label="通知公告" name="second">
          <el-form ref="form"  >
            <el-form-item label="通知标题">
              <el-input v-model="queryInfo.noticeTitle" style="width:180px" placeholder="请输入"></el-input>
              <el-button style="margin-left: 20px;" type="primary" @click="handleQuery">筛选</el-button>
              <el-button @click="removesearchValue()">清空</el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="dialogVisible = true" type="primary">新增</el-button>
<!--              <el-button type="primary">导出</el-button>-->
              <!-- <el-button class="redcolor">批量删除</el-button> -->
              </el-form-item>
              <!-- form -->
              <el-form-item>
                <el-table
                  class="pzxx"
                  ref="multipleTable1"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                >
              <el-table-column type="selection" width="50"></el-table-column>
              <el-table-column label="序号" type="index" width="100"></el-table-column>
              <el-table-column label="提醒标题" prop="noticeTitle"></el-table-column>
              <el-table-column label="提醒内容" prop="noticeContent"></el-table-column>
              <el-table-column label="附件数量" ></el-table-column>
              <el-table-column label="操作" width="200" >
                <template slot-scope="scope">
                  <el-link type="primary" @click="ent(scope.row.noticeId),lk= true">查看</el-link>
                  <el-link type="primary" @click="ent(scope.row.noticeId),editnot = true" style="margin-left: 20px;">编辑</el-link>
                  <el-link type="danger" @click="batchDelNotice(scope.row.noticeId)" style="margin-left: 20px;">删除</el-link>
                </template>
             </el-table-column>

            </el-table>

          </el-form-item>

          </el-form>
        </el-tab-pane>
      </el-tabs>
      <!-- 新增 -->
      <el-dialog
        title="新增"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="50%">
        <el-form>
          <el-row>
          <el-col :span="12">
            <el-form-item label="通知标题">
              <el-input v-model="addform.noticeTitle" style="width: 300px;"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="活动类型">
            <el-select v-model="addform.noticeType" placeholder="请选择" style="width:300px;">
              <el-option label="通知" value="1"></el-option>
              <el-option label="公告" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="活动时间">
              <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="addform.createTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width:300px;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="申请模板书" style="margin-left: 30px;">
            <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
                  >
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <i class="el-icon-download"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible3">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 富文本框 -->
        <el-form-item>
          <div class="head" style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 350px; overflow-y: hidden;"
            v-model="addform.noticeContent"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
        </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addnotice()">发布</el-button>
          <el-button type="primary" @click="dialogVisible = false">保存</el-button>
        </span>
      </el-dialog>
      <!-- 查看 -->
      <el-dialog
          :visible.sync="lk"
          :data="addform1"
          width="50%"
          >
          <div class="father">
            <div class="gg_title">{{ addform1.noticeTitle  }}</div>
            <div class="gg_xx">
                <span>发布者: {{ addform1.remark }}</span>
                <span>发布时间:{{ addform1.createTime }}</span>
            </div>
          <div class="gg_content">
            <div>{{ addform1.noticeContent }}</div>
          </div>
          </div>
          <span slot="footer" class="dialog-footer">
          </span>
        </el-dialog>
        <!-- 编辑  渲染上-->
        <el-dialog
        title="编辑"
        :visible.sync="editnot"
        :data="addform1"
        width="50%">
        <el-form>
          <el-row>
          <el-col :span="12">
            <el-form-item label="通知标题">
              <el-input v-model="addform1.noticeTitle" style="width: 300px;"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="活动类型">
            <el-select v-model="addform1.noticeType" placeholder="请选择" style="width:300px;">
              <el-option label="通知" value="1"></el-option>
              <el-option label="公告" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="活动时间">
              <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="addform1.createTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width:300px;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="11">
        </el-col>
      </el-row>
      <!-- 富文本框 -->
        <el-form-item>
          <div class="head" style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 350px; overflow-y: hidden;"
            v-model="addform1.noticeContent"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
        </el-form-item>
        </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editnotice()">修改</el-button>
            <el-button type="primary" @click="editnot = false">取消</el-button>
          </span>
      </el-dialog>
    </el-card>
    </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Nav from '@/components/Nav.vue'
import {noticeList,addnotice,getnotice,Editnotice,removenotice} from '@/axios/axios-api'

import Vue from 'vue'
import { Editor, Toolbar, } from '@wangeditor/editor-for-vue'
export default {
  data () {
    return {
      editorContent:'',
      activeName: 'second',
      dialogVisible:false,
      lk:false,
      editnot:false,
      putedit:false,
      content:'',
      //列表
      tableData: [],
      queryInfo:{
      },
      total:0,
      multipleSelection:[],//批量选择删除
      // 新增输入框
      addform:{
        noticeTitle:'',
        noticeType:'',
        createTime:'',
        noticeContent:''
      },
      // 查看的数据
      addform1:{
        noticeTitle:'',
        remark:'',
        createTime:'',
        noticeContent:'',
        noticeType:''
      },
      // 富文本框
      editor: null,
      html: '',
      toolbarConfig: { },
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default', // or 'simple',

      // ---静态
        region:'',
        Munb1:'',
        Munb2:'',
        Munb3:'',
        value1:'',
        form:{
            data1:'',
            data2:''
        },
        form1:{
          name:"",
          name2:'',
          name3:'',
          name4:'',
          name5:'',
          name6:'',
          name7:'',
        },
        dialogImageUrl: '',
        dialogVisible3: false,
        disabled: false,
        xqtitle:'',
        xqcontent:'',
        xqTime:'',
        xqremark:'',
    }
  },
  components:{
    Header,
    Nav,
    Editor, Toolbar
  },
  created(){
    this.noTicelist()
  },
  mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        setTimeout(() => {
            this.html = ''
        }, 1500)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    },
  methods:{
    /** 搜索按钮操作 */
    handleQuery() {
      this.noTicelist();
    },
    // 获取公告列表
    noTicelist(){
      noticeList(this.queryInfo).then(res=>{
        console.log(res);
        this.tableData = res.rows
        this.total = res.total
      })
    },
    // 清空
    removesearchValue(){
      this.queryInfo={}
      this.noTicelist()
    },
    // 查看
    ent(noticeId){
      getnotice(noticeId).then(res=>{
            this.addform1.noticeId = res.data.noticeId
            this.addform1.noticeContent= res.data.noticeContent
            this.addform1.noticeContent = this.addform1.noticeContent.replace(/<[^>]+>/g,"")
            this.addform1.noticeTitle = res.data.noticeTitle
            this.addform1.createTime = res.data.createTime
            this.addform1.remark = res.data.remark
            this.addform1.noticeType =  res.data.noticeType
      })
    },
    // 编辑
    editnotice(){
      Editnotice(this.addform1).then(res=>{
        this.$message.success(res.msg)
        this.editnot = false
        this.noTicelist()
      })
    },

    // 新增
    addnotice(){
      // 解决富文本框上传带p标签
      this.addform.noticeContent = this.addform.noticeContent.replace(/<[^>]+>/g,"")

      addnotice(this.addform).then(res=>{
        console.log(res);
        if(res.code == 200){
          this.dialogVisible = false
          this.$message({
            type: 'success',
            message: '新增成功!'
          });
          this.noTicelist()
        }
      })
    },
    // 删除
    batchDelNotice(noticeId){
      console.log(this.multipleSelection);
            removenotice(noticeId).then(res=>{
              if(res.code ==200){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.noTicelist()
              }
            })
					},



    // 富文本
    onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    handleSelectionChange(val) {
      this.multipleSelection = [];
      val.forEach((item) =>{
        this.multipleSelection.push(item.noticeId)
      })
      console.log(this.multipleSelection);
    },

    // 上传
    handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible3 = true;
      },
      handleDownload(file) {
        console.log(file);
      }
  }
}
</script>
<style lang="less" scoped>
a{
text-decoration: none;
}
.box-card{
        width: 91%;
        height: 800px;
        float: right;
        margin-right: 1%;
        margin-top: -43%;
}

.top{
    width: 100%;
}
.el-form{
margin: 0;
width: 100%;
}
.ktW{
  width: 190px;
  float: left;
  margin-left: 20px;
}
.ktW2{
    width: 300px;
  float: left;
    margin-left: 20px;
}
.ktW3{
    width: 250px;
    float: left;
    margin-left: 150px;
}
.btnss{
  float: right;
  margin-right:300px;
}

.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .redcolor{
    border: 2px solid red;
    color: red;
  }
  .fwb{
    margin-top: 200px;
  }
  body{
  position: relative;
}
.headertitle{
  position: absolute;
  top: 0;
  z-index: 999;
  margin-top: 20px;
  margin-left: 180px;
  font-size: 16px;
}
.gg_title{
    font-size: 28px;
    text-align: center;
    font-weight: 700;
    margin-top: -10px;
    margin-bottom: 20px;
}
.gg_xx{
    text-align: center;
    font-size: 10px;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom:10px ;
    margin-bottom: 20px;
}
.gg_content{
    font-size: 14px;
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="less" scoped>
.head{
    margin-top: 100px;
}
</style>
